<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-16 14:23:38
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-11 16:45:48
 * @FilePath: \icoder-frontend\blog\src\App.vue
-->
<template>
  <div class="app" id="area" @click="clicked">
	<f-header :class="{'navBarWrap':navBarFixed}"></f-header>
	<el-row type="flex" justify="center" id="content">
	<el-col :style="{'minHeight':minHeight+'px'}">
	 	<router-view v-if="isRouterAlive"></router-view>
	</el-col>
	</el-row>
	<f-footer></f-footer>
  </div>
</template>

<script>
import { updateTokenApi } from 'api';
export default {
  name: 'app',
  data(){
	  return{
		minHeight: 0,
  		navBarFixed: false,
		isRouterAlive: true,
		clickedCnt:0,
		clickTimer:0,
		// tempTimer:0,
	  }
  },
  provide(){ //提供
            return {
                reload: this.reload,
            }
  },
  components: {
  },
  watch:{
	  '$store.getters.auth.token':function(newVal,oldVal){
		/*
		* 登录开始计时，到时自动刷新token
		*/
		//console.log("newVal: "+newVal+",oldVal: "+oldVal,!newVal)
		// 检测到登录，则启动计时器。
		// if (newVal){
		// 	this.intervaltime();
		// }
		// 检测未登录状态或计时器Id不为0，则清除之前的计时器。
		// else if (!newVal || this.clickTimer!=0){
		// 	clearInterval(this.clickTimer);
		// 	// clearInterval(this.tempTimer);
		// }

		/*
		* 检测到token变成无效,则跳转到首页
		*/
		if(oldVal && !newVal){
			this.$router.push("/");
			this.reload();
		}
	  },
  },
  methods: {
	//定义全局刷新方法，实现灵活刷新
	reload(){
        this.isRouterAlive = false
		// console.log("this is reload!!!!")
        this.$nextTick( function () {
        this.isRouterAlive = true
        })
	},
  	watchScroll () {
  		var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //  当滚动超过 50 时，实现吸顶效果
        if (scrollTop > 50) {
          this.navBarFixed = true
        } else {
          this.navBarFixed = false
        }
  	},
	initSize(){
			let that = this
  			that.minHeight = document.documentElement.clientHeight
  			window.addEventListener('scroll', that.watchScroll)
  			window.onresize = function () {
  				that.minHeight = document.documentElement.clientHeight
  			}
	},
	//更新token
	updateToken(){
		let params = {
			refresh_token:this.$store.getters.auth.refresh_token
			}
		updateTokenApi(params).then(res=>{
			let temp = res;
			if (res.token){
				this.$store.commit('SET_AUTH',temp);
			}
			else{
				this.$store.commit('SET_AUTH',{});
			}
		}).catch(err=>{
			console.log("error, " + err)
		})
		},

	//点击计数
	clicked(){
		this.clickedCnt += 1;
	},
	//定时器执行的函数
	timerFunc(){
		// console.log("clickedCnt,"+this.clickedCnt+","+this.$store.getters.auth.token)
		if (!this.$store.getters.auth.token){
			// console.log("没登录")
			this.clickedCnt = 0;
			clearInterval(this.clickTimer);
			// clearInterval(this.tempTimer);
			return
		}
		if (this.clickedCnt>0){
			this.updateToken()
		}
		else{
			// console.log("clickedCnt1,"+this.clickedCnt)
			this.$store.commit('SET_AUTH',{})
		}
		this.clickedCnt = 0;
		clearInterval(this.clickTimer);
		// clearInterval(this.tempTimer);
	},
	//定时器
	intervaltime:function(){
		// var cnt = 0;
		// this.tempTimer = setInterval(function(){
		// console.log("计时: ",cnt+=1)
		// if (cnt==20){
		// 	cnt = 0
		// }
		// },1000);
	
		this.clickedCnt = 0;
		this.clickTimer = setInterval(()=>{
			this.timerFunc();
		},30*60*1000);
	}
	
  },
  mounted () {
  		this.initSize();
		//初始化，检查有授权则开启更新token的定时器
		// if(this.$store.getters.auth.token){
		// 	this.intervaltime();
		// }
		
  }
}
</script>

<style lang="scss">
	.app{
		font-family: "microsoft yahei";
	}
	#content{
		background-color: #f9f9f9;
		padding: 30px 0;
	}
	.navBarWrap {
    position:fixed;
    top:0;
    z-index:999;
    width: 100%;
  }
</style>
